<template>
	<view class="popup">
		
		<!-- 审核详情弹框 -->
			<view class="popup_header" v-if="isShowTitle">				
				{{popup.title}}
			</view>
	
			<view class="popup_content img_content" v-if="isShowContent">
				{{popup.content}}
			</view>
			
			<view class="popup_content" v-if="isShowImg">
				<image :src="popup.img" mode='aspectFill'></image>
			</view>
			
			<view class="btns_cancel" v-if="isExit">
				<view>
					<navigator class="close" open-type="exit" target="miniProgram" @tap.stop="exit">关闭</navigator>
				</view>
			</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props:{
			isExit:{   //是否退出小程序
				type:Boolean,
				defalut:false
			},
			isShowTitle:{   
				type:Boolean,
				defalut:false
			},
			isShowContent:{
				type:Boolean,
				defalut:false
			},
			isShowImg:{
				type:Boolean,
				defalut:false
			},
			popup:{
				type:Object,
				defalut:{
					title:"",
					content:"",
					img:""
				}
			}
		},
		methods:{
			exit(){
				var _this=this;
				_this.$emit('exit')
			},
		}
	}
</script>

<style lang="less" scoped>
	.overlay{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0.7;
		background:rgba(0,0,0,0.4);
	}
	.popup{
		width: 80%;
		min-height: 230rpx;
		background: #fff;
		opacity: 1;
		position: fixed;
		left: 10%;
		top: 35%;
		font-size: 28rpx;
		z-index: 10;
		border-radius: 8rpx;
	}
 .popup_header{
		text-align: center;
		padding:20rpx;
		border-bottom: 2rpx solid #f1f1f1;
		font-size: 32rpx;
	}
	.popup_title{
		padding: 30rpx 20rpx 30rpx;
	}
	.popup_content{
		padding: 20rpx;
	}
	.btns_cancel{
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		border-top:2rpx solid #f1f1f1;
		color: #67C23A;
		background: #fff;
		border-bottom-left-radius:8rpx ;
		border-bottom-right-radius:8rpx ;
		height: 60rpx;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.blue{
		color: #2680EB;
	}
	.red{
		color:#f78989 ;
	}
	.footer{
		position: absolute;
		bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		.btns{
			width: 45%;
			text-align: center;
			font-size: 28rpx;
		}
		.btns:first-child{
			border: 2rpx solid #2D8DFF;
			color: #2D8DFF;
		}
		.btns:last-child{
			background:  #2D8DFF;
			color: #fff;
		}
		.fblue{
			border-top: 2rpx solid #f1f1f1;
			color:#2680EB ;
		}
		.lblue{
			background: #2680EB;
			color: #fff;
		}
		.fred{
			border-top: 2rpx solid #f1f1f1;
			color:#f78989 ;
		}
		.lred{
			background: #f78989;
			color: #fff;
		}
	}
</style>
